<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="all"
	th:href="@{/plugins/bootstrap/bootstrap.min.css}" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<link rel="stylesheet" type="text/css" href="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ESUICaohNGpKKOAx3d2SOzDxuZ2WUMlX&amp;services=&amp;t=20180323171755"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{/js/ajaxfileupload/ajaxfileupload.js}"></script>
<script th:src="@{/js/ajaxfileupload/exif.js}"></script>

<script type="text/javascript" src="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/init.js"></script>

<link rel="stylesheet" type="text/css" media="all"
	th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/mobile/common.css}" />
<link rel="stylesheet" th:href="@{/mobile/reset.css}" />
<style type="text/css">
td,label,div,table,li,ul,h2,h1  {
	font-size: 13px !important;
}
td {
	margin: 0 !important;
	padding: 0 !important;
}
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}

#detailInspectPanel td {
	border-bottom: 1px solid #d6d6d6;
	font-size: 18px;
}

.div1 {
	border: 1px solid #B8B8B8;
	border-radius: 4px;
	width: 90%;
	margin: auto;
	height: auto;
}

.div-time {
	font-family: PingFangSC-Regular;
	background: #e9e9e9;
	font-size: 18px;
	color: #333333;
	letter-spacing: 0;
	text-align: justify;
	line-height: 50px;
}

.div-type {
	font-family: PingFangSC-Regular;
	font-size: 18px;
	color: #666666;
	letter-spacing: 0;
	text-align: justify;
	margin-left: 20px;
}

.div-inline {
	display: inline;
	font-family: PingFangSC-Regular;
	text-align: justify;
	color: #999999;
	width: 50%;
	font-size: 16px;
	line-height: 50px;
	float: left;
}
.eventTypeclick{
	padding-left:1.6em !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}
.eventRegisterclick{
	padding-left:1.6em !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}
.ta{
height: 100px !important;
width: 99% !important;

border-style:solid !important; 
border-color:#FFFFFF !important;
text-shadow:none !important; 

padding-top: 10px !important;
}
#eventRegisterclick .ui-btn .ui-btn-icon-right .ui-icon-carat-r{
	margin: 0 !important;
	padding: 0 !important;
}
#eventExts ul li a {
margin: 0 !important;
	padding: 0 !important;
}

#eventmap{
	width: 100%;
	height: calc(100% - 80px);
}
</style>
</head>
<body id="myBody">
	<div data-role="page" id="pageone" style="background:#FFFFFF;">
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<!-- <a id="goHome" href="/wcsi/ui/mobileMain?device=mobile"
				data-ajax='false'
				class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> -->
			<span class="fa fa-angle-left goHome"></span>
			<h1 id="roletitle"></h1>
			<!-- <a href='javascript:location.reload();'
				class="ui-btn ui-btn-a ui-icon-refresh ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">refeash</a> -->
		</div>
				<table data-role="table" width="100%" data-mode="columntoggle:none" style="margin-top: 28px;"
					data-column-btn-theme="e" data-column-popup-theme="c" id="myTable">
					<!-- class="ui-body-c ui-responsive ui-shadow" -->
					<!-- <thead class="pearlHeading">
						<tr>
							<th width="30%"></th>
							<th height="50%"></th>
						</tr>
					</thead> -->
					<tbody>
						<tr>
							<td colspan="2"><a href="javascript: ;" id="fileclick">
									<img src="/wcsi/img/takephoto.png" id="avatart"
									style="width: 55px;height: 55px; margin-left: 10px;" />
							</a>
							<div style="display: none;"><input type="file" id="file_upload" name="file"
								style="display: none;" />
							</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" ><textarea type="text" rows="5"
									name="reportContent" id="reportContent"
									placeholder="请填写事件上报的详细内容" class="ta"></textarea></td>
						</tr>
						<!-- <tr>
							<td colspan="2"><textarea data-clear-btn="true" type="text"
									name="reportMemo" id="reportMemo" placeholder="请填写事件备注"></textarea>
							</td>
						</tr> -->

						<tr id="html">
							<td style=" width: 60px;padding-left: 10px !important;">
							<a href="#mapPage" data-transition="slide" class="gotomap">
							<img src="/wcsi/img/mapShow.png" style="width: 40px;height: 40px;"/>
							</a>
							</td>
							<td id="locationDes"
								style="color: #999999; border-bottom: none !important;"></td>
						</tr>
						<tr id="android" style="display: none;">
							<!-- <td style="width: 110px;padding-left: 23px !important;" class="gotomap">定位信息</td> -->
							<td style=" width: 60px;padding-left: 10px !important;">
							<a href="#mapPage" data-transition="slide" class="gotomap">
							<img src="/wcsi/img/mapShow.png" style="width: 40px;height: 40px;"/>
							</a>
							</td>
							<td id="locationDes2"
								style="color: #999999; border-bottom: none !important;"></td>
						</tr>
						<!-- <tr>
							<td colspan="2">
							<a style="background-color:#FFFFFF" href="#mapPage" data-transition="slide">地图</a>
							</td>
						</tr> -->
					</tbody>
				</table>
		

		<input type="hidden" id="identify" th:value="${identify}" /> <input
			type="hidden" id="evenType" th:value="${type}" />

		<div data-role="content" id="mainContent">

			<div th:if="${id != ''}">
				<input id="checkId" name="id" type="hidden" th:value="${id}" />
			</div>
			<input id="lng" name="lng" type="hidden" />
			<input id="lat" name="lat" type="hidden" />
			<input id="lng2" name="lng2" type="hidden" />
			<input id="lat2" name="lat2" type="hidden" />
			<input id="inspectionIdList" name="inspectionIdList" type="hidden" th:value="${inspectionIdList}" />


			<div>
				
				<table id="registerTable" data-role="table" width="100%"
					data-mode="columntoggle:none" data-column-btn-theme="e"
					data-column-popup-theme="c">
					<tbody>
						<tr>
							<td colspan="2"><label style="color: #999999;">事件类型</label>
							</td>
						</tr>
					</tbody>
				</table>
				<div id="registerDiv" data-role="collapsible" data-collapsed="false"
					data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
					data-inset="false">
					<ul data-role="listview" data-inset="false" style="height: 40px;">
						<li data-role="list-divider" class="list-divider-ui">选择事件类型</li>
					</ul>
					
					<ul data-role="listview" data-inset="false" id="firsteventTypes">
						<li data-role="list-divider" class="list-divider-ui">选择事件类型</li>
					</ul>
				</div>
				<div id="registerD" data-role="collapsible" data-collapsed="false"
					data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
					data-inset="false">
					<ul data-role="listview" data-inset="false" style="height: 40px;">
						<li data-role="list-divider" class="list-divider-ui">事件登记</li>
					</ul>
					<ul data-role="listview" id="eventExts">
					</ul>
				</div>

				<div id="eventTypeSingleSelectDiv">
					<select id="eventTypeSingleSelect" name="eventTypeSingleSelect">
						<option th:each="eventType:${eventTypes}"
							th:value="${eventType.id}" th:text="${eventType.eventName}"
							th:selected="${eventType.id == type}"></option>
					</select>
				</div>
				<ul data-role="listview" data-inset="false" style="margin-top: 10px; margin-bottom: 5px;">
					<li data-role="list-divider" style="color: #999999;background: #F2F2F2 !important;">个人身份信息</li>
				</ul>
				<div>
				<table data-role="table" width="100%" data-mode="columntoggle:none" data-column-btn-theme="e" data-column-popup-theme="c">
					<tbody>	
						<tr class="user">
							<td><b>姓名</b></td>
							<td>
								<div th:text="${user.name}"></div>
							</td>
						</tr>
						<tr class="user">
							<td><b>手机号</b></td>
							<td><div th:text="${user.contactType}"></div></td>
						</tr>
					</tbody>
				</table>
				</div>
			</div>
		</div>
		<div data-role="popup" id="popupView" data-position-to="window"
			class="ui-content" data-theme="a" data-overlay-theme="a"
			data-dismissible="false">
			<div data-role="content">
				<img th:src="@{/img/loading.gif}" />
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-theme="a" style="background:#FFFFFF;">
			<center>
				<input id="saveOrUpdateBtn" type="submit" data-inline="false"
					style="background-color: #F8643F; color: white; font-family: PingFangSC-Regular; font-size:16px; width: 95%; padding-top: 8px; padding-bottom: 8px; border-radius: 5px; margin-top: 5px;margin-bottom: 5px;"
					value="提交"></input>
			</center>
		</div>
	</div>
	<div data-role="page" id="mapPage" style='background-color: #F5F5F5; background-size: cover'>
			<div data-role="header" data-tap-toggle="true" data-theme="a">
				<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
				<h1>地图信息</h1>
			</div>
			<div data-role="content" style="background: #FFFFFF;height: 100%;">
				<div id="eventmap" ></div>
				<div style="width: 100%;height: 50px;">
					<table data-role="table" width="100%" data-mode="columntoggle:none" style="margin-top: 5px;"
						data-column-btn-theme="e" data-column-popup-theme="c" id="myTable">
						<tbody>
							<tr>
								<td style="width: 110px;padding-left: 23px !important;">定位信息</td>
								<td id="mapLocationDes" style="color: #999999; border-bottom: none !important;"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
	</div>
	<div data-role="page" id="eventRegisterPanel"
		style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-tap-toggle="true" data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>事件登记</h1>
			<!-- <a href="#pageone" data-transition="slide" data-direction="reverse"
				class="ui-btn ui-btn-a ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-left">返回面板</a> -->
		</div>
		<input id="currentId" name="currentId" type="hidden" />
		<div data-role="content" style="background: #FFFFFF">
<!-- 			<ul data-role="listview" data-inset="false" style="margin-top: 10px; margin-bottom: 5px;">
				<li data-role="list-divider" style="color: #999999;">个人身份信息</li>
			</ul> -->
			<table data-role="table" data-mode="columntoggle:none"
				data-column-btn-theme="e" data-column-popup-theme="c" id="myTable">
				<tbody>
					<tr style="padding-bottom: 0">
						<td><label style="color: #999999; margin: 0">登记事件名称</label></td>
					</tr>
					<tr height="36px">
						<td><input type="text" name="registerEventName"
							id="registerEventName" data-clear-btn="true" />
							<label style="color: #999999; margin-top: 0px;">事件编码</label></td>
					</tr>
					<tr>
						<td><input type="text" name="registerEventIdentify"
							id="registerEventIdentify" readonly="true" /> <label
							style="color: #999999; margin-top: 0px;">接收时限(小时)</label></td>
					</tr>
					<tr>
						<td><input type="text" name="acceptLimitSpan"
							id="acceptLimitSpan"
							onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
							onblur="this.v();" /> <label
							style="color: #999999; margin-top: 0px;">处理时限(小时)</label></td>
					</tr>
					<tr>
						<td><input type="text" name="dealLimitSpan"
							id="dealLimitSpan"
							onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
							onblur="this.v();" /> <label
							style="color: #999999; margin-top: 0px;">登记事件评分级别</label></td>
					</tr>
					<tr>
						<td><select id="registerEventEvaluateLevel"
							name="registerEventEvaluateLevel">
								<!-- <option 
							                    	th:each="registerEventEvaluateLevel:${registerEventEvaluateLevels}"  
							                    	th:value="${registerEventEvaluateLevel.id}"
								                    th:text="${registerEventEvaluateLevel.gradingName}"></option> -->
						</select> <label style="color: #999999; margin-top: 0px;">登记事件严重程度</label>
						</td>
					</tr>
					<tr>
						<td><select id="registerEventSeriousLevel"
							name="registerEventSeriousLevel">
								<option
									th:each="registerEventSeriousLevel:${registerEventSeriousLevels}"
									th:value="${registerEventSeriousLevel.id}"
									th:text="${registerEventSeriousLevel.title}"></option>
						</select> <label style="color: #999999; margin-top: 0px;">登记事件内容</label></td>
					</tr>
					<tr>
						<td><textarea data-clear-btn="true" type="text"
								name="registerEventContent" id="registerEventContent"
								placeholder="请填写登记事件内容"></textarea> <label
							style="color: #999999; margin-top: 0px;">登记事件备注</label></td>
					</tr>
					<tr>
						<td><textarea data-clear-btn="true" type="text"
								name="registerEventMemo" id="registerEventMemo"
								placeholder="请填写登记备注"></textarea> <label
							style="color: #999999; margin-top: 0px;">添加图片</label></td>
					</tr>
					<tr>
						<td style="color: #999999; border-bottom: none !important;"><a
							href="javascript: ;" id="detailfileclick"> <img
								src="/wcsi/img/upload.png" id="avatartD" style="width: 30%" /></a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div data-role="content" style="white-space: nowrap; background: #FFFFFF; height: 70px; margin-bottom: 10xp;padding-top: 10px" align="center" >
			<a href="#pageone" id="deleteBtnT" data-role="button" data-theme="e"
				data-transition="slide" data-direction="reverse"
				data-inline="true"
				style="background-color: #FFFFFF; color: #555555; font-size:16px; width: 95%; padding-top: 8px; padding-bottom: 8px; border-radius: 5px; margin-top: 5px;margin-bottom: 105px;width: 45%;">清除</a>
			<a href="#pageone" id="saveBtnT" data-transition="slide"
				data-direction="reverse" data-role="button" data-theme="e"
			 data-inline="true"
				style="background-color: #F8643F; color: white; font-size:16px; width: 95%; padding-top: 8px; padding-bottom: 8px; border-radius: 5px; margin-top: 5px;margin-bottom: 105px;width: 45%;">保存</a>
		</div>
	</div>
	<script th:src="@{/js/mapcoordinate.js}"></script>
	<script th:src="@{/mobile/event/map.js}"></script>
	<script th:src="@{/mobile/common.js}"></script>
	<script th:src="@{/mobile/event/mobileEventReport.js}"></script>
	
	<script th:inline="javascript">
		window.rootPath= /*[[${#httpServletRequest.getContextPath()}]]*/
	</script>
</body>
</html>